<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #allmap {
            width: 100%;
            height: 700px;
        }
    </style>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IYrcBQaaLVKXdIFjrMCAs7mOm3RcmrEI"></script>

    <title>站点修复</title>
</head>
<body>
<jsp:include page="/WEB-INF/jsp/include/header.jsp"/>
<h1>
    <a href="/metro/show_all_point?city=${param.city}&lineName=${param.lineName}">返回</a> (点击打点){拖动点到正确的位置，点击点生成SQL，执行SQL 修复数据}
</h1>
<table width="100%">
    <tr>
        <td width="80%">
            <div id="allmap"></div>
        </td>
        <td>
            <textarea id="lls"><c:forEach var="point" items="${metroPoint}">
                ${point.lng},${point.lat}|${point.name}
            </c:forEach></textarea>
            <button id="doPoint">打点</button>
        </td>
    </tr>
    <tr>
        <td colspan="2" id="sql"></td>
    </tr>
    <tr>
        <td colspan="2">
            REPLACE INTO _KAIL_METRO_POINT SELECT NULL,UID,CITY_NAME,`NAME`,LNG,LAT FROM _KAIL_METRO_POINT_RAW GROUP BY CITY_NAME,`NAME`;
        </td>
    </tr>
</table>
-- SELECT CONCAT(LNG,',',LAT,'|',`NAME`) FROM _KAIL_METRO_POINT_RAW WHERE CITY_NAME='上海市' AND LINE_NAME='地铁9号线' GROUP BY `NAME`;

</body>
</html>
<script type="text/javascript">

    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(121.49188886, 31.2252692854);
    map.centerAndZoom(point, 8);
    map.enableScrollWheelZoom(true);


    function addPoint(lng, lat, text) {
        var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建点
        marker.addEventListener("click", asdasd);
        marker.enableDragging();
        marker.setLabel(new BMap.Label(text, {offset: new BMap.Size(20, -10)}));
        map.addOverlay(marker);    //增加点
    }

    function asdasd(e) {
        var p = e.target;
        data[p.getLabel().content][0] = p.getPosition().lng;
        data[p.getLabel().content][1] = p.getPosition().lat
        console.info(data)

        var sql = "";
        for (var name in data) {
            sql += "UPDATE _KAIL_METRO_POINT_RAW  SET LNG=" + data[name][0] + ",LAT=" + data[name][1] + " WHERE NAME='" + name + "';<br>";
        }
        $("#sql").html(sql);

    }

    data = {};

    $("#doPoint").on("click", function () {
        var lls = $("#lls").val();
        var lines = lls.split("\n");
        for (var i in lines) {
            var line = lines[i].trim();
            if (!!line) {
                var split = line.split("|");
                var ll = split[0];
                var text = split[1];

                var lnglat = ll.split(",");

                if (!!data[text]) {
                    addPoint(lnglat[0], lnglat[1], text)
                }

                console.info(lines[i] + "==")

                data[text] = lnglat;
            }
        }
    })


</script>

